<template>
  <div class="table-footer" v-if="!isReload" v-cloak>
    <div class="table-pageNum">
      当前第
      <span>{{startRow}}</span>项到第
      <span>{{endRow}}</span>项
      <span v-if="isHasTotal">
        ，总共
        <span>{{totalRow}}</span>项
      </span>
    </div>
    <div class="table-pagination" v-if="!isHasTotal || totalRow > 0">
      <ul class="pagination">
        <li class="first disabled" v-if="cur == 1">
          <a class="page-link">首页</a>
        </li>
        <li class="first" v-else>
          <a class="page-link" @click="btnClick(1)">首页</a>
        </li>
        <li class="prev disabled" v-if="cur == 1">
          <a class="page-link">上一页</a>
        </li>
        <li class="prev" v-else>
          <a class="page-link" @click="btnClick(cur-1)">上一页</a>
        </li>
        <li class="page active" v-if="!isHasTotal">
          <a class="page-link">{{cur}}</a>
        </li>
        <li
          class="page"
          v-else
          v-for="(item, i) in indexs"
          :key="i"
          :class="cur == item ? 'active' : ''"
        >
          <a class="page-link" @click="btnClick(item)">{{item}}</a>
        </li>
        <li class="next disabled" v-if="!isHasNext || cur == total">
          <a class="page-link">下一页</a>
        </li>
        <li class="next" v-else>
          <a class="page-link" @click="btnClick(cur+1)">下一页</a>
        </li>
        <li class="last disabled" v-if="isHasTotal && cur == total">
          <a class="page-link">尾页</a>
        </li>
        <li class="last" v-else-if="isHasTotal">
          <a class="page-link" @click="btnClick(total)">尾页</a>
        </li>
      </ul>
      <div class="pagination-skip">
        <span>到</span>
        <input
          type="number"
          class="form-control"
          min="1"
          v-bind:max="total"
          v-model="skip"
          @keyup.enter="btnClick(skip)"
        />
        <span>页</span>
        <!-- <button class="ake_btn ake_btn_text" @click="btnClick(skip)">Go</button> -->
      </div>
    </div>
    <div class="table-showNum">
      <el-select v-model="pageSize" @change="changePageSize">
        <el-option v-for="i in pageSizes" :key="i" :label="i + ' 项/页'" :value="i"></el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import common from "@mixins/common.js";
export default {
  mixins: [common],
  props: {
    curPage: {
      type: Number,
      default: 1
    },
    parentLength: {
      type: Number,
      default: 20
    },
    visiblePage: {
      type: Number,
      default: 5
    },
    pageSizes: {
      type: Array,
      default: function() {
        return [10, 20, 30, 50];
      }
    },
    size: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      cur: this.curPage,
      visible: this.visiblePage,
      pageSize: this.pageSizes[1],
      totalRow: this.size,
      skip: 1,
      isHasTotal: true,
      isHasNext: true,
      isReload: false
    };
  },
  watch: {
    size: function(val) {
      if (val > -1) {
        this.isHasTotal = true;
      } else {
        this.isHasTotal = false;
      }
      // this.isHasTotal = false
      // this.totalRow = -1;
      // console.log("==="+val)
      this.totalRow = val;
    },
    curPage: function(val) {
      if (this.cur !== val) {
        this.cur = val;
        this.skip = val;
      }
    },
    reloadTable(Val) {
      this.isReload = true;
      this.$nextTick(() => {
        this.isReload = false;
      });
    }
  },
  computed: {
    total: function() {
      let _total = Math.ceil(this.totalRow / this.pageSize);
      return _total;
    },
    startRow: function() {
      let _start = (_start = this.pageSize * (this.cur - 1) + 1);
      if (this.isHasTotal) {
        _start = this.totalRow > 0 ? _start : 0;
      }
      return _start;
    },
    endRow: function() {
      let _end = this.pageSize * this.cur;
      if (this.isHasTotal) {
        _end = this.totalRow > _end ? _end : this.totalRow;
      } else {
        // let len = this.parentLength
        //   ? this.parentLength
        //   : this.$parent.tbodysInfo.length;
        let len = this.$parent.tbodysInfo.length;
        _end = _end - this.pageSize + len;
        console.log(this.pageSize);
        this.isHasNext = len < this.pageSize ? false : true;
      }
      return _end;
    },
    indexs: function() {
      let left = 1;
      let visible = this.visible;
      let total = this.total;
      let right = total;
      let cur = this.cur;
      let half = Math.ceil(visible / 2);
      let arr = [];
      if (total > visible) {
        if (cur <= half) {
          left = 1;
          right = visible;
        } else if (cur >= total - half + 1) {
          right = total;
          left = total - visible + 1;
        } else {
          left = cur - half + 1;
          right = left + visible - 1;
        }
      }
      while (left <= right) {
        arr.push(left);
        left++;
      }
      return arr;
    },
    reloadTable() {
      return this.$store.state.menu.reloadTable;
    }
  },
  methods: {
    initFn() {
      this.cur = 1;
      this.skip = 1;
    },
    btnClick(index) {
      index = Number(index);
      if (index !== this.cur) {
        if (index < 1) {
          this.cur = 1;
        } else if (this.isHasTotal && index > this.total) {
          this.cur = this.total;
        } else {
          this.cur = index;
        }
        this.skip = this.cur;
      }

      this.backDataToParent(1);
    },
    changePageSize() {
      this.cur = 1;
      this.skip = 1;
      this.backDataToParent(1);
    },
    backDataToParent(isFresh) {
      this.$emit("backData", this.cur, this.pageSize);
    }
  }
};
</script>

<style lang="less">
@import "../../assets/less/base/variables.less";
@import "../../assets/less/base/pagination.less";
.table-footer {
  /*position: absolute;
  left: 0;
  right: 0;
  bottom: 0;*/
  width: 100%;
  height: @tableFootH;
  padding-left: 15px;
  padding-right: 15px;
  // border-top: 1px solid @greydd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-user-select: none;
  user-select: none;
  .table-pageNum {
    flex: 1;
    span {
      padding-left: 2px;
      padding-right: 2px;
    }
  }
  .table-showNum {
    flex: 1;
    text-align: right;
    .el-select {
      max-width: 120px;
      .el-input {
        width: 100%;
      }
    }
    .form-control {
      display: inline-block;
      width: auto;
      padding-left: @spacing - 2;
      padding-right: @spacing / 2;
    }
  }
  .table-pagination {
    text-align: center;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 0;
    display: flex;
    align-items: center;
    .pagination {
      font-size: 14px;
    }
    .pagination-skip {
      display: inline-block;
      vertical-align: bottom;
      margin-left: 10px;
      span {
        display: inline-block;
        font-size: 14px;
        padding: 0px @spacing / 2;
      }
      .form-control {
        display: inline-block;
        width: 42px;
        text-align: center;
        padding-left: 2px;
        padding-right: 0px;
        border: 1px solid #dcdfe6;
        -webkit-appearance: none;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        outline: 0;
      }
      .ake_btn {
        vertical-align: sub;
        padding-left: 4px;
        padding-right: 4px;
        height: 28px;
        line-height: 20px;
      }
    }
  }
}
</style>
